<template>
  <div class="de-login">
    <div class="de-login-left">
      <img :src="bgImg" alt="">
      <div class="de-login-left-info">
        <!-- <h4>基于<span>船舶产业资源</span>而搭建的</h4> -->
        <h2>影院购票管理系统</h2>
      </div>
    </div>
    <div class="de-login-right">
      <div class="de-login-box">
        <div class="de-login-logo">
          <!-- <img src="/images/login/logo.png" alt="" /> -->
          <h2 style="text-align: center">登录</h2>
        </div>
        <div class="de-login-form">
          <div class="de-login-item">
            <div class="de-login-label">用户名</div>
            <input
              v-model="loginForm.username"
              class="de-login-input"
              type="text"
              placeholder="请输入用户名"
              @keyup.enter="login"
            >
          </div>
          <div class="de-login-item">
            <div class="de-login-label">密码</div>
            <input
              v-model="loginForm.password"
              class="de-login-input"
              type="password"
              placeholder="请输入密码"
              @keyup.enter="login"
            >
          </div>
          <div class="de-login-item">
            <button class="de-login-btn" @click="login">登录</button>
          </div>
          <div class="de-login-tip">
            <div class="rememberMe">
              <input id="rememberMe" class="custom-checkbox" type="checkbox">
              <label for="rememberMe">记住密码</label>
            </div>
            <a class="forgot-pwd" href="javascript:;"> 忘记密码 </a>
          </div>
          <div class="de-phone-login">手机快速登录</div>
        </div>

        <div class="de-register">
          <span>还没有账户？</span>
          <router-link to="/register">立即注册 &gt; </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      bgImg: require('@/icons/image/bg.png'),
      loginForm: {
        username: '',
        password: ''
      },
      allAccount: []
    }
  },
  watch: {},
  async created() {
    // window.addEventListener('storage', this.afterQRScan)
    const allAccount = await this.$localStorage.getItem('allAccount')
    if (allAccount) {
      this.allAccount = allAccount
    }
  },
  mounted() {},
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    async login() {
      if (!this.loginForm.username || !this.loginForm.password) {
        return this.$message.error('用户名密码不能为空')
      }
      const allAccount = this.allAccount
      if (allAccount && allAccount.length > 0) {
        const loginUser = allAccount.find((item) => {
          if (
            item.username === this.loginForm.username &&
            item.password === this.loginForm.password
          ) {
            return item
          } else {
            return false
          }
        })
        if (loginUser?.state) {
          return this.$message.error(
            '您的账号已被禁用，如需恢复请联系管理员！'
          )
        }
        if (loginUser) {
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          await this.$localStorage.setItem('curUser', loginUser.username)
          await this.$localStorage.setItem('curRole', loginUser.role)
          if (loginUser.username === 'admin') {
            this.$router.replace({ path: '/home' })
          } else {
            this.$router.replace({ path: '/web' })
          }
        } else {
          this.$message.error('用户名或密码错误')
        }
      } else {
        this.$message({
          message: '用户名或密码错误',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.de-login {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.de-login-left {
  position: relative;
  flex: 1;
}

.de-login-left img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.de-login-left-info {
  position: absolute;
  top: 50%;
  right: 138px;
  text-align: right;
  transform: translateY(-50%);
}

.de-login-left-info h4 {
  font-size: 40px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.de-login-left-info h4 span {
  color: rgba(255, 235, 59, 1);
}

.de-login-left-info h2 {
  font-size: 60px;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 11.81%,
    rgba(129, 184, 247, 1) 83.33%
  );
  -webkit-background-clip: text;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-top: 30px;
}

.de-login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 644px;
  padding: 0 calc(120 / 1920 * 100vw);
  background: rgba(255, 255, 255, 1);
}

.de-login-box {
  width: 100%;
}

.de-login-form {
  padding-top: 34px;
}

.de-login-item {
  margin-bottom: 20px;
}

.de-login-label {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 10px;
}

.de-login-input {
  width: 100%;
  height: 52px;
  padding: 0 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(227, 227, 227, 1);
  outline: none;
}

.de-login-btn {
  font-size: 20px;
  width: 100%;
  height: 52px;
  line-height: 52px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  background-color: rgba(0, 70, 145, 1);
  cursor: pointer;
  border: none;
}

.de-login-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.de-login-tip .rememberMe label {
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.forgot-pwd {
  color: rgba(0, 70, 145, 1);
}

.de-phone-login {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
}

.de-register {
  display: flex;
  justify-content: flex-end;
}

.de-register {
  font-size: 16px;
  margin-top: calc(160 / 1920 * 100vw);
}

.de-register a {
  color: rgba(0, 70, 145, 1);
}

.custom-checkbox {
  position: relative;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox + label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-checkbox + label::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #c3c3c3;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-checkbox:checked + label::before {
  border-color: rgba(0, 70, 145, 1);
  background-color: rgba(0, 70, 145, 1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
</style>
